<template>
	<el-row>
		<el-col :span="8">
			<el-button @click="insertDialogFormVisible=true">
				<el-icon>
					<Plus />
				</el-icon>
			</el-button>
			<el-button @click="dpDelete">
				批量删除
			</el-button>
		</el-col>
		<el-col :span="16"> 
		 <el-row>
			 <el-input v-model="ruleForm.sid" style="width: 150px;"></el-input>
			 <el-button type="primary" @click="dpsome">搜索</el-button>
		 </el-row>
		 </el-col>
	</el-row>
	<el-table :data="planData"  @selection-change="handleSelectionChange">
		<el-table-column type="selection" prop="dpid" width="120px"></el-table-column>
		<el-table-column prop="dpname" label="任务名称" width="120px"></el-table-column>
		<el-table-column prop="introduce" label="任务内容" width="300px"></el-table-column>
		<el-table-column prop="sid" label="负责人" width="300px"></el-table-column>
		<el-table-column prop="state" label="执行状态" width="300px"></el-table-column>
		<el-table-column>
			<template #default="scope">
				<el-button @click="deleteone(scope.row.dpid)">
					<el-icon>
						<Delete />
					</el-icon>
				</el-button>
				<el-button>
					<el-icon>
						<EditPen />
					</el-icon>
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- 添加对话框 -->
	<el-row>
		<el-col :span="8"></el-col>
		<el-col :span="12">
			<el-pagination background layout="prev, pager, next"
			 @current-change="doPaging" :page-size="pageSize" :total="dp.length" />
		</el-col>
	</el-row>
	<el-dialog v-model="insertDialogFormVisible" title="添加部门" @close="closeDialog">
		<el-form :label-position="labelPosition" label-width="100px" style="max-width: 350px;margin: 0px auto;">
			<el-form-item label="任务id">
				<el-input v-model="addDP.dpid" placeholder="请输入任务id"></el-input>
			</el-form-item>
			<el-form-item label="任务名称">
				<el-input v-model="addDP.dpname" placeholder="请输入任务的名字"></el-input>
			</el-form-item>
			<el-form-item label="任务内容">
				<el-input v-model="addDP.introduce" placeholder="请输入任务内容"></el-input>
			</el-form-item>
			<el-form-item label="负责人">
				<el-input v-model="addDP.sid" placeholder="请输入任务的负责人"></el-input>
			</el-form-item>
			<el-button @click="saveInsert">确定</el-button>
			<el-button @click="insertDialogFormVisible=false">取消</el-button>

		</el-form>
	</el-dialog>


</template>

<script>
	import qs from 'qs'
	import {
		ElMessage
	} from 'element-plus'
	export default {
		name: "plans",
		data() {
			// var dpidPass=(rule,value,callback)=>{
			// 	if(value===""){
			// 		callback(new Error("请输入任务id"))
			// 	}
			// };
			return {
				ruleForm:{
					sid:""
				},
				planData: [],
				pageSize: 4,
				dp: [],
				insertDialogFormVisible: false,
				addDP: {},
				dpidArr: [],
				// rules:{
				// 	dpid:[{
				// 		validator:dpidPass,
				// 		trigger:"blur"
				// 	}],
				// 	dpname:[{
				// 		validator:dpnamePass,
				// 		trigger:"blur"
				// 	}],
				// 	introduce:[{
				// 		validator:introducePass,
				// 		trigger:"blur"
				// 	}],
				// 	sid:[{
				// 		validator:sidPass,
				// 		trigger:"blur"
				// 	}]
				}
			}
		},
		methods: {
			dpList() {
				let that = this
				this.$axios.get("http://localhost:8080/doplan/list").then(function(res) {
					that.dp = res.data
					that.planData = that.dp.slice(0, that.pageSize)
					console.log(res.data)
				})
			},
			doPaging(curr) {
				//根据当前页   推算当前页应该显示 第几行数据-第几行数据
				//currPage      pagesize    start   to
				//1              3           0      3
				//2              3           3      6

				let start = (curr - 1) * this.pageSize
				let end = curr * this.pageSize
				this.planData = this.dp.slice(start, end)
			},
			handleSelectionChange(arr) {

				this.dpidArr = arr
			},
			dpDelete() {
				let dpids = []
				for (let i = 0; i < this.dpidArr.length; i++) {
					dpids.push(this.dpidArr[i].dpid)
				}
				this.$axios.get("http://localhost:8080/doplan/deleteall?dpids=" + dpids).then(function(res) {

				})
				this.dpList()
			},
			saveInsert() {
				let that = this
				let str = qs.stringify(that.addDP)
				this.$axios.get("http://localhost:8080/doplan/insert?" + str).then(function(res) {
					//res.data   true  false
					if (res.data == true) {
						ElMessage({
							message: '添加成功',
							type: 'success',
						})
						that.insertDialogFormVisible = false
						that.dpList()
					} else {
						ElMessage.error('添加失败')
					}
				})
			},
			dpsome(){
				let that=this
				let str=qs.stringify(that.ruleForm)
				this.$axios.get("http://localhost:8080/doplan/select?"+str).then(function(res){
					that.dp = res.data
					that.planData = that.dp.slice(0, that.pageSize)
					console.log(res.data)
				})
			},
			deleteone(id){
				console.log(id)
				this.$axios.get("http://localhost:8080/doplan/delete",{
					params:{
						dpid:id
					}
				}).then(function(res){})
				this.dpList()
			},
			closeDialog(){
				this.addDP.dpid=''
				this.addDP.dpname=''
				this.addDP.introduce=''
				this.addDP.sid=''
			}
		},
		created() {
			this.dpList()
		}
	}
</script>

<style>

</style>
